/*
* @Date: 2020/4/28
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Modal, Input, message } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons'
import './NewProject.scss';
const path = window.require('path');

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dirPath: path.resolve(__dirname, 'workspace'),
    };
  }

  openDirectory = () => {
    const { dirPath } = this.state;
    XUE.win.showOpenDialog({
      defaultPath: dirPath,
      properties: [
        'openDirectory'
      ],
      message: '新建项目',
    }).then((result) => {
      if (result.canceled) {
        return;
      } else {
        this.setState({
          dirPath: result.filePaths[0]
        });
      }
    }).catch(err => {
      message.error(err);
    });
  }

  onChange = (e) => {
    const { value } = e;
    this.setState({
      dirPath: value
    });
  }

  onOk = () => {
    const { onOk } = this.props;
    const { dirPath } = this.state;
    onOk && onOk(dirPath);
  }

  onCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  }

  render() {
    const { visible } = this.props;
    const { dirPath } = this.state;
    return (
      <Modal
        title="新建工程"
        visible={visible}
        width={400}
        okText="新建"
        cancelText="取消"
        onOk={this.onOk}
        onCancel={this.onCancel}
      >
        <div className="new-project-wrapper">
          <span>目录</span>
          <div className="new-project-input">
            <Input value={dirPath} onChange={this.onChange}/>
          </div>
          <FolderOpenOutlined style={{ fontSize: '24px', marginLeft: '12px' }} onClick={this.openDirectory}/>
        </div>
      </Modal>
    );
  }
}
